<?php
$this->breadcrumbs = array(
    'Recovery password'
);
?>
<h3>Confirm new password</h3>
<form method="post" class="form-horizontal" id="pwForm">
    <div class="control-group">
        <label class="control-label">New password</label>
        <div class="controls">
            <input type="password" required="" name="password" pattern=".{6,}" />
            <div class="help">Minimum 6 characters</div>
        </div>
    </div>
    <div class="control-group">
        <label class="control-label">Repeat password</label>
        <div class="controls">
            <input type="password" required="" name="repassword" oninput="check(this)" pattern=".{6,}" />
        </div>
    </div>
    <div class="form-actions">
        <input type="submit" class="btn btn-primary" value="Submit" />
    </div>
</form>
<script language='javascript' type='text/javascript'>
function check(input) {
    if (input.value != document.getElementById('password').value) {
        input.setCustomValidity('The two passwords must match.');
    } else {
        // input is valid -- reset the error message
        input.setCustomValidity('');
   }
}
</script>